<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>SpongeBob SquarePants</title>
    <link rel="stylesheet" href="./CSS/basis.css">
</head>

<body>
    <div id="button">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSlow">慢速</button>
        <button id="btnNormal">中速</button>
        <button id="btnFast">快速</button>
    </div>
    <div id="text"></div>
    <style id="style"></style>
    <div id="skin">
        <div class="face">
            <div class="eyelash" id="e1"></div>
            <div class="eyelash" id="e2"></div>
            <div class="eyelash" id="e3"></div>
            <div class="eyelash" id="e4"></div>
            <div class="eyelash" id="e5"></div>
            <div class="eyelash" id="e6"></div>
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div id="nose"></div>
            <div class="cheek left">
                <div class="bubble b1"></div>
                <div class="bubble b2"></div>
                <div class="bubble b3"></div>
            </div>
            <div class="cheek right">
                <div class="bubble b1"></div>
                <div class="bubble b2"></div>
                <div class="bubble b3"></div>
            </div>
            <div id="mouth">
                <div id="mouth2"></div>
            </div>
            <div class="corner" id="c1"></div>
            <div class="corner" id="c2"></div>
            <div class="tooth" id="t1"></div>
            <div class="tooth" id="t2"></div>
            <div class="hole" id="h1"></div>
            <div class="hole" id="h2"></div>
            <div class="hole" id="h3"></div>
            <div class="hole" id="h4"></div>
            <div class="hole" id="h5"></div>
            <div class="hole" id="h6"></div>
            <div class="jaw-container">
                <div class="jaw" id="j1"></div>
                <div class="jaw" id="j2"></div>
            </div>
        </div>
    </div>
    <script src="./JS/main.js" type="module"></script>
</body>

</html>